<template>
  <div>
    <div>{{weather.country+weather.city}}</div>
    <div>
      {{weather.date + ' ' + weather.week + ' ' + weather.wea}}
      <img
        style="height: 20px;width: auto;marginRight: 10px;"
        :src="weatherImgs[weather.wea_img]"
      />
      {{'当前温度:'+weather.tem+'°C ' + ' 湿度:' + weather.humidity + ' 空气质量:'+weather.air}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 天气数据
      weather: {},
      // 请求对象
      queryInfo: {
        version: 'v6',
        appid: '49333548',
        appsecret: '5KYhucMU',
        vue: '1',
        city: '广州'
      },
      // 天气图标
      weatherImgs: {
        bingbao: require('../assets/weatherImg/bingbao.png'),
        lei: require('../assets/weatherImg/lei.png'),
        longjuanfeng: require('../assets/weatherImg/longjuanfeng.png'),
        qing: require('../assets/weatherImg/qing.png'),
        shachen: require('../assets/weatherImg/shachen.png'),
        wu: require('../assets/weatherImg/wu.png'),
        xue: require('../assets/weatherImg/xue.png'),
        yin: require('../assets/weatherImg/yin.png'),
        yu: require('../assets/weatherImg/yu.png'),
        yujiaxue: require('../assets/weatherImg/yujiaxue.png'),
        yun: require('../assets/weatherImg/yun.png')
      }
    }
  },
  created() {
    this.getWeather()
  },
  methods: {
    async getWeather() {
      const { data: res } = await this.$http.get('/api', {
        params: this.queryInfo
      })
      console.log(res)
      this.weather = res
      // this.weaImgUrl = this.weaImgUrl + res.wea_img + '.png'
      // this.weaImgUrl = require(this.weaImgUrl)
    }
  }
}
</script>

<style lang="stylus" scoped></style>
